<template>
<div class="demo-grid">
  <mu-row gutter>
    <mu-col class="header-item" width="25" tablet="25" desktop="25">
      <div class="gutter-first">{{dayUserNumber}}</div>
      <div class="gutter-second">
        <!-- <mu-date-picker hintText="起始时间" inputClass='date-input'/> -->
        今日新增用户
        <!-- <mu-date-picker hintText="结束时间"/> -->
      </div>
    </mu-col>
    <mu-col class="header-item" width="25" tablet="25" desktop="25">
      <div class="gutter-first">{{dayPictureNumber}}</div>
      <div class="gutter-second">今日新增图片</div>
    </mu-col>
    <mu-col class="header-item" width="25" tablet="25" desktop="25">
      <div class="gutter-first">{{userNumber}}</div>
      <div class="gutter-second">用户总数</div>
    </mu-col>
    <mu-col class="header-item" width="25" tablet="25" desktop="25">
      <div class="gutter-first">{{pictureNumber}}</div>
      <div class="gutter-second">图片总数</div>
    </mu-col> 
  </mu-row>
  <mu-row gutter>
    <mu-col class="grade-box" width="25" tablet="25" desktop="25">
      <div class="grade-title">用户地区排行</div>
      <infinite-scroll></infinite-scroll>
    </mu-col>
    <mu-col class="grade-box" width="25" tablet="25" desktop="25">
      <div class="grade-title">用户点赞排行</div>
      <infinite-scroll></infinite-scroll>
    </mu-col>
    <mu-col class="sex-rade-box" width="50" tablet="50" desktop="50">
      
      <schart :canvasId="canvasId"
                :type="type"
                :width="width"
                :height="height"
                :data="sexData"
                :options="options"
          >
      </schart>
    </mu-col>
  </mu-row>
</div>
</template>
<script>
  import infiniteScroll from '../components/infinite-scroll.vue'
  import Schart from 'vue-schart';
  import http from "../http/http.js" 
  export default {
    data () {
      return {
        activeTab: 'tab1',
        activeList: 'list1',
        headerTitle: '审核',

        canvasId: 'myChart',
        type: 'pie',
        width: 550,
        height: 450,
        //
        getDayPictureNum:'http://www.meimei.com/getDayPictureNum',
        dayPictureNumber: 0,// 今日新增图片数
        getPictureNumUrl:'http://www.meimei.com/getPictureNum',
        pictureNumber: 0,//图片总数
        
        dayUserNumber:0,//今日新增用户数
        getDayUserNumUrl:'http://www.meimei.com/getDayUserNum',
        userNumber:0,//用户总数
        getSexNumUrl:'http://www.meimei.com/getSexNum',
        sexData: [],
        options: {
          title: '用户性别比例',
          bgColor: '#F5F5F5',
          titleColor: '#474A4F',
          legendColor: '#474A4F'
        },

      }
    },
    components : {
      infiniteScroll,
      Schart
    },
    methods: {
      handleTabChange (val) {
        this.activeTab = val
      },
      handleListChange (val) {
        this.activeList = val
      }
    },
    mounted() {
      var that = this
      //获取用户有关数据
      http.get(that.getSexNumUrl)
      .then(function(response){
        console.log(response)
        var maleNumber = parseInt(response.data.maleNumber)
        var femaleNumber = parseInt(response.data.femaleNumber)
        var userNumber = parseInt(response.data.userNumber)
        var sexArr = [
          {name: '男性', value: maleNumber},
          {name: '女性', value: femaleNumber}
        ]
        that.sexData = sexArr
        that.userNumber = userNumber
      })
      .catch(function(err){console.log(err)});
      //获取每日新增用户数
      http.get(that.getDayUserNumUrl)
      .then(function(response){
        that.dayUserNumber = parseInt(response.data.dayUserNumber)
      })
      .catch(function(err){console.log(err)});
      //获取图片有关数据
      http.get(that.getPictureNumUrl)
      .then(function(response){
        var pictureNumber = parseInt(response.data.pictureNumber)
        that.pictureNumber = pictureNumber
      })
      .catch(function(err){console.log(err)});
      //今日新增图片
      http.get(that.getDayPictureNum)
      .then(function(response){
        var dayPictureNumber = parseInt(response.data.dayPictureNumber)
        that.dayPictureNumber = dayPictureNumber
      })
      .catch(function(err){console.log(err)});
    },
  }
</script>

<style lang="css" scode>
.small {
    width: 500px;
    height: 500px;
}



.header-item {
  background: #311B92;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 8px;
  margin-bottom: 8px;
}
.grade-box{
  border: 1px solid #ddd;
  padding: 8px 0;
  background-color:#F5F5F5;
  border-radius: 7px;
}
.grade-title{
  padding: 0 10px;
  /*text-align: center;*/
}
.sex-rade-box{
  border: 1px solid #ddd;
  padding: 8px 0;
  background-color:#F5F5F5;
  border-radius: 7px;
}
.gutter-first{
  color:#F44336;
  font-size: 35px;
}
.gutter-second{
  color:#ffffff;
  font-size: 11px;
}
</style>